<template>
  <div>
    <div class="bread banxin">
        商品分类 / 叩丁狼定制保温杯
    </div>
    <header class="banxin">
        <div class="left">
            <div class="l-left">
                <img :src="'https://sc.wolfcode.cn'+product.coverImg" alt="" class="coverimg">
                <div class="images">
                    <img :src="'https://sc.wolfcode.cn'+item.src" alt="" 
                    v-for="item,index in product.imgAltas" @click="checkImg(index)" 
                    :class="{on:product.coverImg==product.imgAltas[index].src}">
                </div>
            </div>
            <div class="l-right">
                <h2>{{product.seriesTitle}}</h2>
                <p>{{product.seriesSubTitle}}</p>
                <i>{{product.coin}}积分</i>
                <ul v-for="item,index in product.parameterJson">
                    <section>{{ item.title }}</section>
                    <li :class="{active:item.currentActivate}" v-for="item1,index1 in item.parameters">{{ item1.title }}</li>
                </ul>
                <div class="count">
                    <h4>数量</h4>
                    <div class="c-but">
                        <button @click="count++">+</button>
                        <span>{{ count }}</span>
                        <button @click="remove">-</button>
                    </div>
                    
                </div>
                <div class="buttons">
                    <button>加入购物车</button>
                    <button>立即购买</button>
                </div>
                <div class="l-foot">
                    <img src="@/assets/images/details/like-click.png" alt=""> 
                    <span>喜欢 {{product.like}}</span>
                    <img src="" alt="">
                    <img src="" alt="">
                    <img src="" alt="">
                </div>
            </div>
        </div>
        <div class="right">
            <h3>你还可以换</h3>
            <ul>
                <li v-for="item,index in thenyoucanbuy" :key="item.id" @click="conversion(item.id)">
                    <img :src="'https://sc.wolfcode.cn'+item.img" alt="">
                    <div class="r-right">
                        <h4>{{ item.name }}</h4>
                        <p><span>{{ item.coin }}</span>积分</p>
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <article class="banxin">
        <div class="section">
            <button class="acion">商品详情</button>
            <button>联系我们</button>
        </div>
        <div v-html="product.description" class="des">
            <!-- <li>品牌名称：ZEMAY</li>
            <li>产品参数：</li>
            <li>产品名称：ZEMAY</li>
            <li>品牌: ZEMAY  </li>
            <li>型号: ZEMAY-3000</li>
            <li>容量: 201mL(含)-300mL(含)</li> -->
        </div>
        <!-- <img src=""> -->
    </article>
  </div>
</template>

<script>
export default {
    created(){
        // this.$ajax.get("/products/{id}")
        
        if(this.$route.params.id){
            let id = this.$route.params.id;
            this.$ajax.get("/products/"+id).then(res=>{
                console.log(res);
                if(res.code==0){
                    this.product = res.data.productInfo;
                    this.thenyoucanbuy = res.data.themYouCanBuy;
                    this.product.description = this.product.description.replace(/src="/g,'src="https://sc.wolfcode.cn/');

                }
            })
        }
    },
    data(){
        return{
            product:{},
            thenyoucanbuy:[],
            count:0,
        }
    },
    methods:{
        conversion(id){
            this.$router.push({name:"detail",params:{id}});
        },
        remove(){
            if(this.count>0){
                this.count--
            }
        },
        //切换图片
        checkImg(index){
            this.product.coverImg = this.product.imgAltas[index].src ;
        }
    },
    computed:{
        
    }
}
</script>

<style lang="less" scoped>
 @import "@/assets/css/base.less";
 button{
    border: 0;
    cursor: pointer;
 }
 .bread{
    padding:10px 0;
    margin-top: 20px;
    text-align: left;
 }
header{
    display: flex;
    justify-content: space-between;
    padding-bottom: 52px;
    border-bottom: 1px solid #ccc;
    text-align: left;
    .left{
        display: flex;
        justify-content: space-between;
        .l-left{
            .coverimg{
                width: 460px;
                height: 440px;
                margin-bottom: 20px;
            }
            .images{
                display: flex;
                justify-content: flex-start;
                gap:10px;
                img{
                    width: 100px;
                    height: 100px;
                    opacity: 0.5;
                    cursor: pointer;
                    &:hover{
                        opacity: 1;
                    }
                }
                .on{
                    opacity: 1;
                }
                
            }
            
        }
        .l-right{
            width: 480px;
            margin:0 15px ;
            h2{
                color: #000000;
                font-size: 28px;
            }
            p{
                color: #999;
                font-size: 14px;
                padding: 15px 0;
                line-height: 20px;
            }
            i{
                display: block;
                color: #FD604D;
                font-size: 28px;
                font-weight: bold;
                line-height: 22.81px;
                border-bottom: 1px solid #ccc;
                padding: 23px 0;
            }
            ul{
                list-style: none;
                padding: 19px 0;
                section{
                    color: #000000;
                    font-size: 16px;
                    font-weight: bold;
                }
                li{
                    display: inline-block;
                    cursor: pointer;
                    width: 76px;
                    height: 32px;
                    border: 1px solid #D1D1D1;
                    color: #666666;
                    font-size: 14px;
                    margin:10px 5px 0 0;
                    font-weight: light;
                    line-height: 32px;
                    overflow: hidden;
                    text-align: center;
                }
                .active{
                    border-color: #0A328E;
                    color: #0A328E;
                }
            }
            .count{
                padding: 10px 0;

                h4{
                    color: #000000;
                    font-size: 16px;
                    font-weight: bold;
                    padding: 10px 0;
                }
                .c-but{
                    display: flex;
                    justify-content: flex-start;
                    button{
                        width: 30px;
                        height: 32px;
                        border: 1px solid #D1D1D1;
                        color:#999999;
                    }
                    span{
                        border: 0.5px solid #D1D1D1;
                        border-left: 0;
                        border-right: 0;
                        height:32px;
                        line-height: 32px;
                        width: 46px;
                        display: inline-block;
                        text-align: center;
                        box-sizing: border-box;
                    }                               
                }
                
            }
            .buttons{
                margin:24px 0;
                button{
                    background-color: #3DC36B;
                    color: #fff;
                    width: 150px;
                    height: 46px;
                    &:nth-child(2){
                    background-color: #FD604D;
                    margin-left: 19px;
                }
                }
                
            }
            .l-foot{
                img{
                    vertical-align: middle;
                }
                span{
                    padding: 0 19px;
                    border-right: 1px solid #ccc;
                }
                img:not(1){
                    width: 24px;
                    height: 24px;
                    margin: 0 5px;
                }
            }
        }
    }
    .right{
        padding: 0 10px;
        border-left: 1px solid #ccc;
        h3{
            color: #333333;
            font-size: 18px;
        }
        ul{
            list-style: none;
            li{
                margin-top: 20px;
                cursor: pointer;
                &:hover{
                    img{
                        border: 2px solid #0A328E;
                        box-sizing: border-box;
                    }
                    h4{
                        color: #0A328E;
                        font-weight: bold;
                    }
                }
                img{
                    width: 80px;
                    height: 60px;
                    vertical-align: middle;
                }
                .r-right{
                    display:inline-block;
                    color: #666666;
                    vertical-align: middle;
                    margin-left: 5px;
                    height: 60px;
                    
                    h4{
                        width: 100px;
                        white-space:nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-size: 14px;
                        padding: 5px 0;
                    }
                    p{
                        
                        font-size: 18px;
                        line-height: 20px;
                        span{
                            color:#FF5E0F;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
}
article{
    text-align: left;
    .section{
        button{
            width: 120px;
            height: 50px;
            background-color: #fff;
            opacity: 0.5;
            color: #999999;
        }
        .acion{
            background-color: #ECECEC;
            color: #000;
            font-weight: bold;
            opacity: 1;
        }
    }
    .des{
        margin-top: 56px;
    }
    img{
        margin-top: 50px;
    }
}
</style>